<template>
 <div id="news-list">
      <!-- 新闻的 item 项 -->
      <div class="news-item">
        <img
          class="thumb"
          :src="item.img"
          alt=""
        />
        <div class="right-box">
          <!-- 新闻标题 -->
          <h1 class="title">{{ item.title }}</h1>
          <div class="footer">
            <div>
              <!-- 新闻来源 -->
              <span>{{ item.source }}</span>&nbsp;&nbsp;
              <!-- 发布日期 -->
              <span>{{ item.time}}</span>
            </div>
            <!-- 评论数量 -->
            <span>评论数：{{ item.cmtcount }}</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            required: true
        }
    }
}
</script>

<style scoped>
.news-item {
  display: flex;
  border: 1px solid #eee;
  width: 700px;
  padding: 10px;
  margin-bottom: 5px;
}

.thumb {
  display: block;
  width: 230px;
  height: 140px;
  background-color: #ccc;
  margin-right: 10px;
}

.right-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: normal;
}

.tags span {
  display: block;
  float: left;
  background-color: #F0F0F0;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  margin-right: 8px;
}

.footer {
  display: flex;
  justify-content: space-between;
}
</style>